<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ICClub 登陆页面</title>
    <link rel="stylesheet" href="../static/css/login.css">
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=GK8muKdwK0w3So6HW89F8KlHc5BKzdbL"></script>

</head>
<body>
    <div id="nav">
        <div id="top">
            <img src="../static/images/background_img/timg01.jpeg" alt="">
        </div>
        <img id="bg" src="../static/images/background_img/timg01.jpeg" alt="">

        <div class="box1">

            <a href="">
                <i>
                    <p class="text">
                        ICClub
                    </p>

                </i>
            </a>
            <p class="text">
                身体跟灵魂必须有一个在路上
            </p>
        </div>
        <div id="box">
            <div class="logtop">
                <h2 class="h1"><a id="h1" href="#">登录</a></h2>
                <span class="line"></span>
                <h4 class="h2"><a id="h2" href="#">新用户注册</a></h4>

            </div>
            <hr class="hrtop">
            <div class="put">
                <div class="bo1">
                    <p>用户名 : </p>
                    <input type="text" id="username"
                       placeholder="用户名/微博账号"  name="username"
                       maxlength="16" required ="if(this.value.replace(/^+| +$/g,'')=='')alert('不能为空!')"  autofocus >
                     <img class="img1" src="../static/images/icon/right.jpg" alt="">
                    <span >请输入正确的用户名</span>
                </div>
            </div>



            <div class="put">
                <div class="bo1">
                    <p>密码 : </p>
                    <input type="password" id="passwd" placeholder="6-16位 数字 + 字母" name="passwd" maxlength="16"
                        pattern="\w{6,16}" required autocomplete="on" >
                    <img class="img1" src="../static/images/icon/right.jpg" alt="">

                    <span>请按规则输入正确密码</span>
                </div>
            </div>
            <div class="put">
                <div class="bo1">
                    <p>手机号码 : </p>
                    <input type="text" id="phone" placeholder="11位手机号码" name="phone" maxlength="11"
                        pattern="\w{11}" required autocomplete="on" minlength="11">
                    <img class="img1" src="../static/images/icon/right.jpg" alt="">
                    <span>请输入手机号码</span>
                </div>

            </div>
            <div class="put">
                <div class="bo1">
                    <p>手机验证 : </p>

                    <input type="text" id="code"
                       placeholder='输入验证码'  name="phonecode" pattern="\w{6}"
                       maxlength="6" minlength="6" required>
                    <img class="img1" src="../static/images/icon/right.jpg" alt="">
                    <span id="tips">请输入验证码</span>
                    <button id="but">点击获取验证码</button>
                </div>

            </div>
            <hr class="hrbut">
            <div class="sub">
                <input type="button" id="sub" value='登&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;录'>
            </div>

            <div class="put1">

                <div class="weibo">
                    <span id="quickly">快速登录</span>
                    <a href="https://passport.weibo.cn/signin/login"><img src="../static/images/icon/weibo.jpg" width="20px" height="20px" alt=""></a>
                </div>

                <a id="passwd_forget" href="#">忘记密码？</a>
            </div>
        </div>
    </div>

    <script src="/static/js/tool_kit.js"></script>
    <script src = '/static/js/jquery.min.js'></script>
    <script src = '/static/js/base_con.js'></script>
    <script src="/static/js/login.js"></script>
    <script src="/static/js/regist.js"></script>

</body>
</html>